"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Menu, X, Twitter } from "lucide-react"
import DiscordIcon from "./discord-icon"

const navItems = [
  { name: "Home", href: "/" },
  { name: "Pre-sale", href: "/pre-sale" },
  { name: "DA Service", href: "/da-service" },
  { name: "NFT Showcase", href: "/nft-showcase" },
  { name: "Road Map", href: "/road-map" },
  { name: "Stake", href: "#", disabled: true, tag: "Thoon" },
  { name: "FlyWheel Model", href: "/flywheel-model" },
  { name: "FAQs", href: "/faqs" },
]

export default function Navbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)

  // Handle scroll event
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 10)
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  // Toggle mobile menu
  const toggleMobileMenu = () => {
    setMobileMenuOpen((prev) => !prev)
  }

  return (
    <>
      {/* Fixed header */}
      <header
        className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 ${
          scrolled ? "bg-dark-blue/90 backdrop-blur-sm" : "bg-transparent"
        }`}
      >
        <nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
          <div className="flex lg:flex-1">
            <Link href="/" className="-m-1.5 p-1.5">
              <span className="sr-only">BeraRoot</span>
              <Image src="/images/logo-full.png" alt="BeraRoot Logo" width={180} height={40} className="h-10 w-auto" />
            </Link>
          </div>
          <div className="flex lg:hidden">
            <button
              type="button"
              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-white relative z-50"
              onClick={toggleMobileMenu}
            >
              <span className="sr-only">{mobileMenuOpen ? "Close menu" : "Open menu"}</span>
              {mobileMenuOpen ? (
                <X className="h-6 w-6" aria-hidden="true" />
              ) : (
                <Menu className="h-6 w-6" aria-hidden="true" />
              )}
            </button>
          </div>
          <div className="hidden lg:flex lg:gap-x-8">
            {navItems.map((item) => (
              item.disabled ? (
                <span
                  key={item.name}
                  className="text-md font-semibold leading-6 text-gray-400 relative group"
                >
                  {item.name}
                  {item.tag && (
                    <div className="hidden lg:block absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap">
                      <span className="text-[8px] font-medium bg-bera-yellow/20 backdrop-blur-sm text-bera-yellow px-1.5 leading-none py-0.5 rounded-full border border-bera-yellow/30">
                        {item.tag}
                      </span>
                      <div className="absolute left-1/2 -translate-x-1/2 top-[95%] w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-t-[4px] border-bera-yellow/30"></div>
                    </div>
                  )}
                </span>
              ) : (
                <Link
                  key={item.name}
                  href={item.href}
                  className="text-md font-semibold leading-6 text-white hover:text-bera-yellow transition-colors"
                >
                  {item.name}
                </Link>
              )
            ))}
          </div>
          <div className="hidden lg:flex lg:flex-1 lg:justify-end lg:gap-4">
            <Link
              href="https://twitter.com/beraroot"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-bera-blue text-white hover:bg-bera-blue/80 transition-colors"
              aria-label="Twitter"
            >
              <Twitter className="h-5 w-5" />
            </Link>
            <Link
              href="https://discord.gg/beraroot"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-bera-blue text-white hover:bg-bera-blue/80 transition-colors"
              aria-label="Discord"
            >
              <DiscordIcon defaultColor="#fff" size={20} />
            </Link>
          </div>
        </nav>
      </header>

      {/* Mobile menu - Separate from header, always fullscreen */}
      <div
        className={`fixed inset-0 bg-dark-blue z-40 transition-transform duration-300 transform lg:hidden ${
          mobileMenuOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="flex flex-col h-full p-6">
          {/* Top bar with logo and close button */}
          <div className="flex items-center justify-between mb-8">
            <Link href="/" className="-m-1.5 p-1.5" onClick={toggleMobileMenu}>
              <span className="sr-only">BeraRoot</span>
              <Image src="/images/logo-full.png" alt="BeraRoot Logo" width={180} height={40} className="h-10 w-auto" />
            </Link>
            <button type="button" className="rounded-md p-2.5 text-white" onClick={toggleMobileMenu}>
              <span className="sr-only">Close menu</span>
              <X className="h-6 w-6" aria-hidden="true" />
            </button>
          </div>

          {/* Menu items */}
          <div className="flex-1 flex flex-col justify-center">
            <div className="space-y-8 py-6">
              {navItems.map((item) => (
                item.disabled ? (
                  <span
                    key={item.name}
                    className="block text-center text-2xl font-semibold leading-7 text-gray-400 relative flex items-center justify-center"
                  >
                    <span className="flex items-center justify-center">
                      {item.name}
                      {item.tag && (
                        <div className="lg:hidden ml-2 whitespace-nowrap flex items-center">
                          <div className="w-0 h-0 border-t-[4px] border-t-transparent border-b-[4px] border-b-transparent border-r-[4px] border-bera-yellow/30"></div>
                          <span className="text-[9px] font-medium bg-bera-yellow/20 backdrop-blur-sm text-bera-yellow px-1.5 leading-none py-0.5 rounded-full border border-bera-yellow/30">
                            {item.tag}
                          </span>
                        </div>
                      )}
                    </span>
                  </span>
                ) : (
                  <Link
                    key={item.name}
                    href={item.href}
                    className="block text-center text-2xl font-semibold leading-7 text-white hover:text-bera-yellow"
                    onClick={toggleMobileMenu}
                  >
                    {item.name}
                  </Link>
                )
              ))}
            </div>
            <div className="mt-10 flex justify-center gap-6">
              <Link
                href="https://twitter.com/beraroot"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-bera-blue text-white hover:bg-bera-blue/80 transition-colors"
                aria-label="Twitter"
              >
                <Twitter className="h-6 w-6" />
              </Link>
              <Link
                href="https://discord.gg/beraroot"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-bera-blue text-white hover:bg-bera-blue/80 transition-colors"
                aria-label="Discord"
              >
                <DiscordIcon defaultColor="#fff"size={24} />
              </Link>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
